<template>
  <a-modal
    title="导出用户"
    style="top: 20px;"
    :width="500"
    centered
    v-model="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
  >
    <a-form :form="form">
      <div :style="{ borderBottom: '1px solid #E9E9E9' }">
        请选择导出字段
        <a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange">
          全选
        </a-checkbox>
      </div>
      <br />
      <a-checkbox-group v-model="checkedList" @change="onChange">
        <a-row>
          <a-col :span="24" :class="checkedList.includes('tenantName')?'border_color':'border'">
            <a-checkbox value="tenantName">
              租户
            </a-checkbox>
          </a-col>
          <a-col :span="24" :class="checkedList.includes('deptName')?'border_color':'border'">
            <a-checkbox value="deptName">
              部门名称
            </a-checkbox>
          </a-col>
          <a-col :span="24" :class="checkedList.includes('loginName')?'border_color':'border'">
            <a-checkbox value="loginName">
              登录名
            </a-checkbox>
          </a-col>
          <a-col :span="24" :class="checkedList.includes('userName')?'border_color':'border'">
            <a-checkbox value="userName">
              用户名
            </a-checkbox>
          </a-col>
          <a-col :span="24" :class="checkedList.includes('status')?'border_color':'border'">
            <a-checkbox value="status">
              状态
            </a-checkbox>
          </a-col>
          <a-col :span="24" :class="checkedList.includes('sex')?'border_color':'border'">
            <a-checkbox value="sex">
              性别
            </a-checkbox>
          </a-col>
          <a-col :span="24" :class="checkedList.includes('phoneNum')?'border_color':'border'">
            <a-checkbox value="phoneNum">
              手机号
            </a-checkbox>
          </a-col>
          <a-col :span="24" :class="checkedList.includes('lastLoginDate')?'border_color':'border'">
            <a-checkbox value="lastLoginDate">
              最后登录时间
            </a-checkbox>
          </a-col>
          <a-col :span="24" :class="checkedList.includes('createTime')?'border_color':'border'">
            <a-checkbox v-decorator="['createTime']" value="createTime">
              创建时间
            </a-checkbox>
          </a-col>
        </a-row>
      </a-checkbox-group>
    </a-form>
  </a-modal>
</template>

<script>
const plainOptions = ['tenantName', 'deptName', 'loginName', 'userName', 'status', 'sex', 'phoneNum', 'lastLoginDate', 'createTime']
export default {
  name: 'UserExportModal',
  data () {
    return {
      checkedList: ['tenantName', 'deptName', 'loginName', 'userName', 'status', 'sex', 'phoneNum', 'lastLoginDate', 'createTime'],
      visible: false,
      confirmLoading: false,
      mdl: {},
      form: this.$form.createForm(this),
      indeterminate: true,
      checkAll: false,
      plainOptions,
      queryParam: {}
    }
  },
  methods: {
    onChange (checkedList) {
      this.indeterminate = !!checkedList.length && checkedList.length < plainOptions.length
      this.checkAll = checkedList.length === plainOptions.length
    },
    export (queryParam) {
      this.queryParam = queryParam
      this.visible = true
      this.indeterminate = !!this.checkedList.length && this.checkedList.length < plainOptions.length
      this.checkAll = this.checkedList.length === plainOptions.length
    },
    handleSubmit () {
      console.log(this.checkedList)
    },
    onCheckAllChange (e) {
      Object.assign(this, {
        checkedList: e.target.checked ? plainOptions : [],
        indeterminate: false,
        checkAll: e.target.checked
      })
    }
  }
}
</script>

<style scoped>
  .border {
    margin-bottom: 8px;
    background: #ffffff;
    border: 1px solid rgba(137, 137, 137, 0.53);
    padding: 0 10px;
    height: 30px;
    display: flex;
    align-items: center;
    border-radius: 2px;
  }
  .border_color {
    margin-bottom: 8px;
    background: #ffffff;
    border: 1px solid rgb(0, 0, 0);
    padding: 0 10px;
    height: 30px;
    display: flex;
    align-items: center;
    border-radius: 2px;
  }
</style>
